<!DOCTYPE html>
<html>
<head>
<#include "/base/head.html">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script type="text/javascript">
	var oldNodes;
	
	$(function(){
		
		$("#rolesResource").combobox({
			onSelect : function(rec) {
				var url = "${contextPath}/sys/role/getRoleAllResources?id="+rec.id;
				
				$('#tt').tree({
					url:url,
					formatter : function(node) {
						return node.description;
					},
					onLoadSuccess: function() {
						oldNodes = $('#tt').tree('getChecked');		

					}
				});

				$('#tt').tree('reload');
				
			},
			${lovService.getLovListString("lov_role_name")}
		});
		
		$("#rolesResource").combobox('select',$("#rolesResource").combobox('options').data[0].id);
	});
	
	function cancle() {
		$('#tt').tree('reload');
	}
	
	function save() {
		var nodes = $('#tt').tree('getChecked');
		var nodeIds = new Array();
		var roleId = $("#rolesResource").combobox('getValue');

		var ok = null;
		console.log(oldNodes);
		console.log(nodes);
		
		for (var i = 0; i < oldNodes.length; i++) {
			ok = false;
			for(var j = 0; j < nodes.length; j++) {
				if(nodes[j].id == oldNodes[i].id) {
					ok = true;	
					break;
				}
			}
			if(ok) continue;
			
			nodeIds.push({resourceId : -oldNodes[i].id,roleId : roleId});
		}
		
		for(var j = 0; j < nodes.length; j++) {
			ok = false;
			for (var i = 0; i < oldNodes.length; i++) {
				if(nodes[j].id == oldNodes[i].id) {
					ok = true;
					break;
				}
			}
			if(ok) continue;

			nodeIds.push({resourceId : nodes[j].id,roleId : roleId});
		}
		
		var jsonNodeIds = JSON.stringify(nodeIds);
		BaseJs.ajax("${contextPath}/sys/role/updateRoleResources?roleId="+roleId, {resourcesStr:jsonNodeIds},function(r){
			oldNodes = nodes;
			alert(r.data);
		});

	}
	
	</script>
	<div id="rolesResource"></div>

	<div style="margin: 20px 0;">
		<a href="#" class="easyui-linkbutton" onclick="save()">保存</a>
		<a href="#" class="easyui-linkbutton" onclick="cancle()">撤销</a>
	</div>
	<!-- 
    <div style="margin:10px 0">
        <input type="checkbox" checked onchange="$('#tt').tree({cascadeCheck:$(this).is(':checked')})">CascadeCheck 
        <input type="checkbox" onchange="$('#tt').tree({onlyLeafCheck:$(this).is(':checked')})">OnlyLeafCheck
    </div>
     -->
	<div class="easyui-panel" style="padding: 5px">
		<ul id="tt" class="easyui-tree" data-options="method:'get',animate:true,checkbox:true"></ul>

	</div>
</body>
</html>